<template>
	<div class="banner w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>首页轮播</p>
		</div>
		<div class="bannerText">
			<div class="el-tabs-report">
				<a class="listOne" @click="createBanner">添加轮播图</a>
			</div>
			<el-table :data="tableData" border>
				<el-table-column prop="id" label="序号"></el-table-column>
				<el-table-column prop="name" label="滚动图名称"></el-table-column>
				<el-table-column label="缩略图" width="387">
					<template slot-scope="scope">
						<div class="bannerImg">
							<img :src="scope.row.img" style="width: 100%;height:100%;border: 0;"/>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)">编辑</el-button>
						<el-button @click="handleDelete(scope.row)" class="red">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<em style="font-style: normal;font-size: 12px;color:#ccc;margin: 20px 0 0 10px;display: block;">建议尺寸为672*378,滚动图间隔时间：3秒</em>
		</div>
	</div>
</template>

<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				banner:'',
				tableData: []
			}
		},
		methods: {
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/homepageRolation/getHomepageRolation",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {rootcompanyid:1},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data;
							this.total=res.data.data;
						}
					}
				});
			},
			handleEdit(row) {
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/homepageRolation/homepageRolationDetails",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {id:row.id},
					success: res => {
						if(res.data.code == 200) {
							this.$router.push({
								name: 'addbanner',
								params: {
									type: 'edit'
								}
							})
							this.$root.bannerMsg = res.data.data;
//							console.log('102',this.$root.bannerMsg);
						}else{
							console.log("获取详细信息失败")
						}
					}
				});
			},
			handleDelete(row) {
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			deleteSubmit() {
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/homepageRolation/deleteHomepageRolation",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'DELETE',
					data: {id:this.transitionRow.id},
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			createBanner(){
        		this.$router.push({
          			path: '/addbanner'
        		})
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getTableList();
			this.banner = this.$root.huasan.banner;
		}
	}
</script>

<style>
	.banner .bannerImg{width: 268px;height: 153px;display: block;margin: 0 auto;}
</style>